<template>
	<view class="overall">
		<view class="main">
			<ul class="nav">
				<li class="li" v-for="(item,index) in navList" :key="index" :class = "{active:!(index-menuIndex)}" @click = 'menuShow(index)'>
					{{item.name}} 
					<view :class = "{border:!(index-menuIndex)}"></view>
				</li>
			</ul>
			
			<view class="mais" v-show = 'menuIndex == 0'><!--此处可以换成子组件-->
				<mais :jdata="lists" :jimg="imageList" :noMore="noMore"></mais>
			</view>

			<view class="mais" v-show = 'menuIndex == 1'><!--此处可以换成子组件-->
				<issue :jdata="lists_two"  :tang="imageList"></issue>
			</view>

			<view class="mais" v-show = 'menuIndex == 2'><!--此处可以换成子组件-->
				<mais :jdata="lists_three" :jimg="imageList" :noMore="noMore"></mais>
			</view>
		</view>
		
		<!-- <view class="bottom"></view> -->
		<tabBar  :index_p2="index_p2" ></tabBar>
	</view>
</template>

<script>

	import Mais from 'pages/index/transmit/Mais';
	import Issue from 'pages/index/transmit/Issue';
	// import Cargo from 'pages/index/cargo/Cargo'
	import tabBar from '@/components/tabBar/tabBar.vue'

	export default {
		components: {
			Mais,
			Issue,
			// Cargo,
			tabBar
		},
		
		data() {
			return {	
        		menuIndex:0,
				navList:[
					{name:"房象传媒"},
					{name:"买房问问"},
					{name:"房象干货"},
				],	
				pageCode:2,//当前页
				TotalPage:1,//总页数
				lists:{},
				lists_two:{},
				lists_three:{},
				noMore:0,//没有更多 0=不显示，1=显示

				imageList:[],
				index_p2:2
			}
		},
		onLoad(e) {
			// if(e.type == undefined){
			// 	this.menuIndex = 0;
			// }else{
			// 	this.menuIndex = e.type;
			// }
			// uni.showTabBar();
			this.menuIndex = 0;
			this.initData(0);
		},
		onReachBottom(e) {
			// console.log('触底加载更多');
			this.initData(1);
			
		},
		methods: {
			initData(is_loading){
				 //获取图片
				this.$api.getImage({
					ids: '779ab593866a6187b2f34ee0b4757c0e,ffb6595deed0e3291eaed47335cd585e,28c310c36ed71d6dade28e60f17ade69,616b0395d0cdbc8bde236ee8bd6870d7'
				},
				res => {
					this.imageList = res;
				});

				let _this = this;
				this.$api.getNews({
						is_loading:is_loading,
						type:_this.menuIndex,
						page:_this.pageCode
					},
					res => {
						if(is_loading == 1){
							//加载
							if(res.length <= 0){
								_this.noMore = 1;
							}
							if(_this.menuIndex == 0){
								console.log(res);
								if(_this.pageCode <= _this.TotalPage){
									for(let i=0;i<res.res.length;i++){
										_this.lists.push(res.res[i]);
									}
									_this.pageCode = _this.pageCode + 1;
								}
							}
							if(_this.menuIndex == 1){
								if(_this.pageCode <= _this.TotalPage){
									for(let i=0;i<res.res.length;i++){
										_this.lists_two.push(res.res[i]);
									}
									_this.pageCode = _this.pageCode + 1;
								}
							}
							if(_this.menuIndex == 2){
								if(_this.pageCode <= _this.TotalPage){
									for(let i=0;i<res.res.length;i++){
										_this.lists_three.push(res.res[i]);
									}
									_this.pageCode = _this.pageCode + 1;
								}
							}
						}else{
							if(_this.menuIndex == 0){
								this.lists = res.lists.res;
							}
							if(_this.menuIndex == 1){
								this.lists_two = res.lists.res;
							}
							if(_this.menuIndex == 2){
								this.lists_three = res.lists.res;
							}
							this.TotalPage = res.TotalPage;
						}
					}
				);
			},
			
			menuShow (index) {
				this.menuIndex = index;
				this.pageCode = 2;
				this.initData(0);
			}
		},
	}
</script>

<style scoped>
	*{
		list-style: none;
		padding: 0 ;
		margin: 0;
	}
	.overall{
		height: 100%;
		width: 100%;
		/* margin-bottom: 40rpx; */
		background: #fff;
		position: absolute;
		top: 0;
	}
	.main>ul{
		/* height:300upx; */
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		position: fixed;
		z-index: 999;
		top: 0;
		background: #fff;
	}
	.li{
		height: 74rpx;
		width: 200rpx;
		text-align: center;
		line-height: 74rpx;
		color: #333;
		font-size: 30rpx;
		font-weight: 550;
	}
	.active{	
		font-size: 35upx;
		color: #FA531C;
	}
	.border{
		height: 10upx;
		width: 30upx;
		margin: 0 auto;
		border-radius: 10upx;
		background: #FA531C;
	}
	
	.bottom{
		height: 180rpx;
	}
	.mais{
		padding-top: 40upx;
		padding-bottom: 40upx;
		margin-top: 40upx;
		background: #fff;
		border-top: 1px solid #F0F0F0;
	}
</style>
